<!--
 * @Author: your name
 * @Date: 2021-11-14 09:50:22
 * @LastEditTime: 2021-11-14 10:34:05
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue-note\day03\06.图书购物车案例.html
-->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>06.图书购物车案例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <style>
      table {
        border: 1px solid #e9e9e9;
        border-collapse: collapse;
        border-spacing: 0;
      }

      th,
      td {
        padding: 8px 16px;
        border: 1px solid e9e9e9;
        text-align: left;
      }

      th {
        background-color: #f7f7f7;
        color: #5c6b77;
        font-weight: 600;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div v-if="books.length">
        <table>
          <thead>
            <tr>
              <th></th>
              <th>书籍名称</th>
              <th>出版日期</th>
              <th>价格</th>
              <th>购买数量</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in books" :key="item.id">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.date}}</td>
              <td>{{item.price | showPrice}}</td>
              <td>
                <button :disabled="item.count <= 1" @click="decrement(index)">
                  -
                </button>
                {{item.count}}
                <button @click="increment(index)">+</button>
              </td>
              <td><button @click="del(item.id)">移除</button></td>
            </tr>
          </tbody>
        </table>
        <h2>总价格： {{allPrice}}</h2>
      </div>
      <div v-else>
        <h2>购物车为空</h2>
      </div>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          books: [
            {
              id: 1,
              name: "《算法导论》",
              date: "2006-9",
              price: 85.0,
              count: 1,
            },
            {
              id: 2,
              name: "《UNIT编程艺术》",
              date: "2006-2",
              price: 59.0,
              count: 1,
            },
            {
              id: 3,
              name: "《编程珠玑》",
              date: "2008-10",
              price: 39.0,
              count: 1,
            },
          ],
        },

        // 方法
        methods: {
          increment(index) {
            this.books[index].count++;
          },
          decrement(index) {
            this.books[index].count--;
          },

          //   移除
          del(id) {
            this.books = this.books.filter((item) => item.id !== id);
          },
        },

        computed: {
          // 计算总价格
          allPrice() {
            return this.books.reduce((p, c) => p + c.price * c.count, 0);
          },
        },

        // 过滤器
        filters: {
          // 添加$符号和保留两位数字
          showPrice(price) {
            return "$" + price.toFixed(2);
          },
        },
      });
    </script>
  </body>
</html>
